<template>
    <div>
        <!-- 卡片视图 -->
        <el-card>
            <div class="probox">
                <!-- 文本框 -->
                <div class="probox_ul" @dragstart="dragstart(item)" @dragenter="dragenter(item,$event)"
                    @dragend="dragend(item,$event)" :draggable="true" v-for="(item,index) in list" :key="item.li">
                    <!-- 图片 -->
                    <div class="probox_li">
                        <a class="probox_li_a" :href="item.sysUrl + '?IdToken=' + item.Token" target="_blank" 
                            v-on:click="doThis(item.Token)">
                            <img class="probox_li_a_img" ref="image" :src="item.imgPath">
                        </a>
                    </div>
                    <!-- 标题 -->
                    <div class="probox_title">
                        <!-- 标题文本 -->
                        <div class="probox_title_list">{{item.sysName}}</div>
                        <!-- 收藏标签 -->
                        <div id="probox_title_collect" :class="item.isFavorites ? 'el-icon-star-on' : 'el-icon-star-off'"
                            @click="collect1(index,item.Token)" ref="collect"></div>
                    </div>
                    <!-- 标签 -->
                    <div class="probox_tag">
                        <!-- 标签文本 -->
                        <div class="probox_tag_tata">
                            <el-tag class="probox_tag_title" type="success" v-for="tag in item.sysLabel" :key="tag.id">{{tag}}</el-tag>
                        </div>
                        <!-- 详情信息 -->
                        <el-button class="probox_tag_outline" icon="el-icon-warning-outline" circle
                            @click="handleClick(index)"></el-button>
                    </div>
                </div>
            </div>
        </el-card>
        <!-- 信息详情 -->
        <el-dialog :title="sysName" :visible.sync="dialogVisible" width="50%" center>
            <!-- 信息名称 -->
            <div class="probox_tag_outline_title">{{description}}</div><br>
            <!-- 表格信息 -->
            <el-table :data="usergridData">
                <el-table-column property="linkMan" label="姓名" width="100"></el-table-column>
                <el-table-column property="cellPhone" label="手机号" width="120"></el-table-column>
                <el-table-column property="duty" label="责任事项" width="100"></el-table-column>
                <el-table-column property="mail" label="邮箱" width="230"></el-table-column>
                <el-table-column property="cornet" label="短号" width="80"></el-table-column>
            </el-table><br>
            <!-- 下载说明 -->
            <el-button class="probox_tag_outline_butt" @click="download(sop)">
                <a :href="sop" :download="sop">
                    <svg class="icon" t="1646266400504" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4431" width="20" height="20">
                        <path d="M19.236571 955.245714s10.020571 25.892571 23.405715 0c0 0 149.357714-450.706286 513.462857-337.188571v139.922286.s5.851429 82.285714 77.604571 28.672l357.814857-309.028572s75.922286-41.252571-4.534857-97.865143L625.152 68.900571s-54.418286-38.765714-67.584 24.868572l-0.438857 150.893714c0.146286 0.146286-678.473143 32.694857-537.892572 710.656z"
                            p-id="4432" fill="#707070"></path>
                    </svg>
                    <span class="probox_tag_outline_span">sop下载</span>
                </a>
            </el-button>
        </el-dialog>
    </div>
</template>

<script>
// 引入收藏与查询接口
import {
    getquerySystemInfo,
    getaddFavorites,
    getverifyToken,
    getoptionValue,
} from "@/api/ssoapi/sso";
import Cookies from "js-cookie";
import { login, getCodeImg, getverifyEmpNo } from "@/api/login";
// 加密与解密的方法
import { encrypt, decrypt } from '@/utils/jsencrypt';
import service from "../../../utils/request";

export default {
    data() {
        return {
            // 登录搜索条件
            buttonIndex: 1,
            tab: true,
            li: false,
            codeUrl: "",
            // 个人信息
            loginFrom: {
                username: "",
                password: "",
                rememberMe: false,
                code: "",
                uuid: "",
            },
            // 验证信息
            loginRules: {
                username: [
                    {required: true,trigger: "blur",message: "请输入您的账号"}
                ],
                password: [
                    {required: true,trigger: "blur",message: "请输入您的密码"}
                ],
                code: [
                    {required: true,trigger: "change",message: "请输入验证码"}
                ],
            },
            loading: false,
            // 验证码开关
            captchaOnOff: true,
            // 注册开关
            register: false,
            redirect: undefined,
            // 查询登录结束
            // 显示搜索条件
            showSearch: true,
            dialogVisible: false,
            // 拖拽对象
            draging: null,
            // 目标对象
            target: null,
            show: true,
            // 默认不收藏
            isFavorites: false,
            
            // 系统ID
            sysId: '',
            // 系统名称
            sysName: '',
            // 系统标签
            sysLabel: '',
            // 系统类型
            sysType: '',

            disabled: false,
            description: '',
            // sop地址
            sop: '',
            imglist: [],
            // 总条数
            // 查询参数
            queryParams: {
                sysName: null,
                bu: null,
            },
            // 点击查询
            // 系统名称
            collectName: '',
            collectdialogVisible: false,

            // 表单校验
            rules: {
                bu: [
                    {required: true,message: "BU不能为空",trigger: "blur"}
                ],
                registerId: [
                    {required: true,messaage: "搜索条件不能为空",trigger: "blur"}
                ],
            },
            // 获取图片数据
            photourlData: "",
            buOptions: [],
            usergridData: [],
            list: [],
            dragIndex: "",
            enterIndex: "",
            isShow: false,
        }
    },
    created() {
        // 获取查询信息列表
        this.getSystemInfo();
        // 获取个人信息列表
        this.getCookie();
        // 获取BU查询下拉框
        this.getBuList();
        var session = sessionStorage.getItem("sessionObj");
    },
    methods: {
        // 点击链接方法
        doThis(Token) {
            if(Token === "" || Token === undefined) {
                this.collectdialogVisible = true;
                this.isShow = true;
                var x = this.list;
                for(let i = 0;i < x.length;i ++) {
                    var x1 = x[i].sysUrl = "javascript:void(0);";
                    this.list.push(x1);
                }
            }
        },
        // 查询BU下拉框
        getBuList() {
            this.loading = true;
            getoptionValue().then(response => {
                // console.log("测试加载",response);
                this.buOptions = response.data;
                this.loading = false;
            });
        },
        // 查询信息列表
        getSystemInfo() {
            let tempData = {
                "buNames": [],
                "isFavorites": "",
                "sysLabel": "",
                "sysName": "",
                "sysType": "",
            }

            if(this.queryParams.bu == null) {
                tempData.buNames == this.buOptions;
            }else {
                let buDATA = this.qureyParams.bu;
                let arrayDATA = buDATA.split(",");
                tempData.buNames = arrayDATA;
            }

            if(this.queryParams.sysName == null) {
                tempData.sysName == this.sysName;
            }else {
                tempData.sysName = this.queryParams.sysName;
            }

            tempData.sysLabel = this.sysLabel;
            tempData.sysType = this.sysType;
            tempData.isFavorites = "0";

            let str = JSON.stringify(tempData);
            const checkId = Cookies.get("Admin-Token");
            // RUOYI封装的请求方法
            getquerySystemInfo(str).then(response => {
                // 发送请求获取到的数据
                // console.log(response.data);
                // 系统筛选封装filter方法
                // includes() 方法用于判断字符串是否包含指定的子字符串
                this.list = response.data.filter(item => item.sysType.includes('资讯'));
                this.list.forEach((item,index) => {
                    item['li'] = index;
                    item['Token'] = checkId;
                });
            });
        },
        // 拖拽方法
        dragstart(value) {
            // console.log('测试拖拽开始',value);
            // 拖动的当前数据
            this.oldData = value;
        },
        // 记录移动过程中的信息
        dragenter(value,e) {
            // 两条数据,拖动的数据,与交换的数据
            // console.log('测试拖拽开始移动过程中的信息value',value);
            // 各个信息
            // console.log('测试拖拽开始移动过程中的信息e',e);
            this.newData = value;
            // 各个信息组织冒泡
            e.preventDefault();
        },
        // 拖拽最终操作
        dragend(value, e) {
            if(this.oldData !== this.newData) {
                let oldIndex = this.list.indexOf(this.oldData);
                let newIndex = this.list.indexOf(this.newData);
                let newItems = [...this.list];
                // 删除老的节点
                newItems.splice(oldIndex,1);
                // 在列表中目标位置增加新的节点
                newItems.split(newIndex,0,this.oldData);
                this.list = [...newItems];
                this.$nextTick(() => {
                    this.imglist = this.list;
                });
            }
        },
        shuffle() {
            this.list = this.$shuffle(this.list);
        },
        // 点击星号收藏
        collect1(index,isToken) {
            if(isToken === "" || isToken === undefined) {
                this.collectdialogVisible = true;
                this.isShow = false;
            }else {
                this.list[index].isFavorites = !this.list[index].isFavorites;
                let collectData = {
                    "sysId": "",
                }
                collectData.sysId = this.list[index].sysId;
                let str2 = JSON.stringify(collectData);
                if(this.list[index].isFavorites === false) {
                    getaddFavorites(str2).then(response => {
                        if(response.code === 200) {
                            this.$notify({
                                title: response.msg,
                                message: response.msg,
                                type: "success",
                                offset: 100,
                            });
                            this.list[index].isFavorites = false;
                        }else {
                            this.$notify.error({
                                title: response.msg,
                                message: response.msg,
                                offset: 100,
                            });
                        }
                    });
                }else if(this.list[index].isFavorites === true) {// 取消收藏 false
                    getaddFavorites(str2).then(response => {
                        if(response.code === 200) {
                            this.$notify({
                                title: response.msg,
                                message:response.msg,
                                type: "success",
                                offset: 100,
                            });
                        }else {
                            this.$notify.error({
                                title: "错误",
                                message: response.msg,
                                offset: 100,
                            });
                        }
                    });
                }
            }
        },
        // 点击直接进入按钮
        lineLogin() {
            let photourlDatalist = this.photourlData;
            // console.log('测试连接',photourlDatalist);
            // 页面跳转到登录页
            window.location.href = photourlDatalist;
        },
        // 点击关闭按钮
        lineLoginclose() {
            this.collectdialogVisible = false;
        },
        // 验证码
        getCode() {
            getCodeImg().then(res => {
                this.captchaOnOff = res.captchaOnOff = undefined ? true : res.captchaOnOff;
                if(this.captchaOnOff) {
                    // 把返回的图片拼接base64编码的gif图片数据
                    this.codeUrl = "data:image/gif;base64," + res.img;
                    this.loginForm.uuid = res.uuid;
                }
            })
        },
        // 获取Cookie身份信息
        getCookie() {
            const username = Cookies.get('username');
            const password = Cookies.get('password');
            const rememberMe = Cookies.get('rememberMe');
            this.loginForm = {
                username: username === undefined ? this.loginForm.username : username,
                // 对password进行加密
                password: password === undefined ? this.loginForm.password : decrypt(password),
                rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
            }
        },
        // 登录方法
        handleLogin() {
            this.$refs.loginForm.validate(valid => {
                if(valid) {
                    this.loading = true;
                    if(this.loginForm.password) {
                        // Cookies有效期30天
                        Cookies.set('username',this.loginForm.username,{expires: 30});
                        Cookies.set('password',encrypt(this.loginForm.password),{expires: 30});
                    }else {
                        Cookies.remove('username');
                        Cookies.remove('password');
                    }
                    this.$store.dispatch('Login',this.loginForm).then(() => {
                        // console.log('测试重定向',this.redirect);
                        this.$router.push({path: this.redirect || "/"}).catch(() => {});
                        // 需要刷新页面才能成功
                        setTimeout(() => {
                            window.location.reload();
                        },1000);
                    }).catch(() => {
                        this.loading = false;
                        if(this.captchaOnOff) {
                            this.getCode();
                        }
                    });
                }
            });
        },
        // 详情信息的方法
        handleClick(index) {
            // console.log('测试handleClick',index);
            this.dialogVisible = true;
            // console.log('测试list',this.list);
            this.sysName = this.list[index].sysName;
            // console.log('测试11',this.sysName);
            this.usergridData = this.list[index].linkMan;
            // console.log('测试描述',this.usergridData);
            this.sop = this.list[index].sopUrl;
            this.description = this.list[index].description;
        },
        // 下载方法
        download(sop) {
            window.open(sop);
        },
    },
}
</script>

<style scoped>
* {
    margin: 0px;
    padding: 0px;
}
.probox {
    display: flex;
    flex-direction: column;
    flex-flow: wrap;
    align-content: flex-start;
}
.probox_ul {
    width: 280px;
    height: 320px;
    margin: 30px;
    border: 1px solid rgb(149, 149, 149);
    border-radius: 5px;
}
.probox_ul:hover {
    box-shadow: 1px 5px 20px 3px rgba(149, 149, 149, 0.3)
}
.probox_li {
    width: 100%;
    height: 200px;
}
.probox_li_a {
    width: 100%;
    height: 200px;
    border-radius: 5px;
}
.probox_li_a_img {
    width: 100%;
    height: 200px;
    border-radius: 5px;
}
.probox_title {
    position: relative;
}
.probox_title_list {
    padding: 5px 3px 3px 8px;
    position: absolute;
}
.probox_title_collect {
    position: absolute;
}
.el-icon-star-on {
    cursor: pointer;
    margin: 45px 0px 0px 250px;
    font-size: 27px;
}
.el-icon-star-off {
    cursor: pointer;
    margin: 45px 0px 0px 250px;
    font-size: 27px;
}
.el-icon-star-on:hover {
    animation-name: star1;
    animation-duration: 2s;
}
.el-icon-star-off:hover {
    animation-name: star1;
    animation-duration: 2s;
}
@keyframes star1 {
    0% {
        transform: scale(0.7);
    }
    100% {
        transform: scale(1.2);
    }
}
.probox_tag {
    margin-top: 10px;
    position: relative;
    text-align: center;
}
.probox_tag_tata {
    height: 16px;
    margin: 0px 5px 0px 5px;
    position: absolute;
}
.probox_tag_title {
    margin: 0px 5px 0px 0px;
    padding: 0px 5px 0px 5px;
    font-size: 12px;
}
.probox_tag_outline {
    width: 1px;
    height: 1px;
    margin: 3px 6px;
    padding: 0px;
    position: absolute;
    right: 26px;
    font-size: 26px;
    border-radius: 26px;
}
.el-icon-warning-outline {
    size: small;
}
.probox_tag_outline_butt {
    margin: 10px;
    padding: 10px;
}
.probox_tag_outline_span {
    margin: 3px;
    padding: 3px;
}
</style>